<template>
  <div class="header">
    <h1>Welcome! This is a TodoList</h1>
  </div>
  <div class="wrapper">
    <div class="form">
      <el-input v-model="inputValue" placeholder="Please input" size="large" :clearable="true" class="input" />
      <el-button size="large" @click="addTodo" type="primary">Add</el-button>
    </div>
  </div>
  <div class="tabs">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="All" name="first">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>All Task</span>
            </div>
          </template>
          <transition-group :duration="3000" tag="ul" name="fade" class="container">
            <div v-for="item in todoList" :key="item.ID" class="item">
              <div class="text">
                <div>
                  <span>{{ item.content }}</span>
                </div>
                <div>
                  <el-button :type="item.isFinished ? 'default' : 'success'" @click="updateTodo(item.ID)" size="small">
                    {{ item.isFinished ? '取消' : '完成' }}
                  </el-button>
                  <el-button type="danger" @click="deleteTodo(item.ID)" size="small">删除</el-button>
                </div>
              </div>
              <el-divider />
            </div>
          </transition-group>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="Finished" name="second">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>Finished Task</span>
            </div>
          </template>
          <transition-group :duration="3000" tag="ul" name="fade" class="container">
            <div v-for="item in todoList" :key="item.ID" class="item">
              <div v-if="item.isFinished">
                <div class="text">
                  <div>
                    <span>{{ item.content }}</span>
                  </div>
                  <div>
                    <el-button
                      :type="item.isFinished ? 'default' : 'success'"
                      @click="updateTodo(item.ID)"
                      size="small"
                    >
                      {{ item.isFinished ? '取消' : '完成' }}
                    </el-button>
                    <el-button type="danger" @click="deleteTodo(item.ID)" size="small">删除</el-button>
                  </div>
                </div>
                <el-divider />
              </div>
            </div>
          </transition-group>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="BackLog" name="third">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>Unfinished Task</span>
            </div>
          </template>
          <transition-group :duration="3000" tag="ul" name="fade" class="container">
            <div v-for="item in todoList" :key="item.ID" class="item">
              <div v-if="!item.isFinished">
                <div class="text">
                  <div>
                    <span>{{ item.content }}</span>
                  </div>
                  <div>
                    <el-button
                      :type="item.isFinished ? 'default' : 'success'"
                      @click="updateTodo(item.ID)"
                      size="small"
                    >
                      {{ item.isFinished ? '取消' : '完成' }}
                    </el-button>
                    <el-button type="danger" @click="deleteTodo(item.ID)" size="small">删除</el-button>
                  </div>
                </div>
                <el-divider />
              </div>
            </div>
          </transition-group>
        </el-card>
      </el-tab-pane>
      <h2 class="record">
        Total number of tasks in history :
        <span>{{ history_total }}</span>
      </h2>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { reqTodoList, Data, reqDeleteTodo, reqAddTodo, reqUpdateTodo } from './api/todo'
const inputValue = ref<string>('')
const activeName = ref('first')
const todoList = ref<Data[]>([]) // 所有列表
const history_total = ref<number>(0)

const addTodo = async () => {
  if (inputValue.value == '') {
    ElNotification({
      title: 'Warning',
      message: 'InputValue cannot be empty!',
      type: 'warning',
    })
    return
  }
  const { code } = await reqAddTodo(inputValue.value)
  if (code == 0) {
    ElNotification({
      title: 'Success',
      message: 'success add todo',
      type: 'success',
    })
    getTodoList()
  } else {
    ElNotification({
      title: 'Error',
      message: 'Server interval error',
      type: 'error',
    })
  }
}

onMounted(() => {
  getTodoList()
})

const getTodoList = async () => {
  const { data, code } = await reqTodoList()
  if (code != 0) {
    ElNotification({
      title: 'Error',
      message: 'Server interval error',
      type: 'error',
    })
  }
  todoList.value = data.todo_list
  history_total.value = data.history_total
}

const deleteTodo = async (ID: number) => {
  const { code } = await reqDeleteTodo(ID)
  if (code == 0) {
    ElNotification({
      title: 'Success',
      message: 'success delete todo',
      type: 'success',
    })
    getTodoList()
  } else {
    ElNotification({
      title: 'Error',
      message: 'Server interval error',
      type: 'error',
    })
  }
}

const updateTodo = async (ID: number) => {
  const { code } = await reqUpdateTodo(ID)
  if (code == 0) {
    getTodoList()
  } else {
    ElNotification({
      title: 'Error',
      message: 'Server interval error',
      type: 'error',
    })
  }
}
</script>
<style scoped>
.header {
  text-align: center;
  color: #409eff;
}
.wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form {
  display: flex;
  width: 60%;
  height: 40px;
  justify-content: space-between;
  align-items: center;
}
.input {
  height: 100%;
  width: 90%;
}

.tabs {
  width: 60%;
  margin: 0 auto;
}
.container {
  padding: 0;
  margin: 0;
}

.box-card {
  height: 515px;
  overflow: auto;
}
.card-header {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.record {
  text-align: center;
}
.record > span {
  color: #409eff;
  
}

/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}

@media screen and (max-width: 415px) {
  .form {
    width: 80%;
  }
  .input {
    width: 70%;
  }
  .tabs {
    width: 80%;
  }
  .box-card {
    height: 350px;
  }
}
</style>
